<template>
  <!-- 主视口 -->
  <TopBar class="TopBar" />
  <div class="main">
    <div class="left_content">
      <LeftNav></LeftNav>
    </div>
    <div class="right_content hover_scrollbar">
      <!-- <el-scrollbar view-style="height:100%;"> -->
        <div class="content">
          <router-view v-slot="{ Component }">
            <transition name="silde-in-out" mode="out-in">
              <keep-alive :include="includeAlive">
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </router-view>
        </div>
        <div class="foot">create by coldStar</div>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script lang="ts">
import LeftNav from "@/components/leftNav/index.vue";
import TopBar from "@/components/TopBar/index.vue";
import { defineComponent, watch, reactive } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "viewPort",
  components: { TopBar, LeftNav },
  setup() {
    const router: any = useRouter();
    const includeAlive: Array<string> = reactive([]);
    watch(
      router.currentRoute,
      (newVal) => {
        if (newVal.meta.keepAlive && !includeAlive.includes(newVal.name)) {
          console.log(newVal);
          
          includeAlive.push(newVal.name);
        }
      },
      {
        immediate: true,
      }
    );
    return {
      includeAlive,
    };
  },
});
</script>

<style scoped lang="scss">
.silde-in-out-enter-active,
.silde-in-out-leave-active {
  transition: all 0.3s ease;
}
.silde-in-out-enter-from,
.silde-in-out-leave-to {
  opacity: 0;
  transform: translateX(150px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.TopBar {
  height: 60px;
}
.main {
  height: calc(100vh - 60px);
  overflow: auto;
  display: flex;
  .left_content {
    width: 240px;
  }
  .right_content {
    flex-grow: 1;
    height: 100%;
    overflow-x: hidden;
    position: relative;
    // min-height: 100%;
    .content {
      // min-height: calc(100% - 60px);
      min-height: 100%;
      padding-bottom: 60px;
      position: relative;
      z-index: 1;
    }
    .foot {
      height: 60px;
      border-top: 1px solid #eee;
      margin-top: -60px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
  }
}
</style>
